<template>
  <section class="user-card">
    <nuxt-link class="avatar" :to="'/user/' + userCardData.id">
      <img :src="userCardData.avatar" alt="">
    </nuxt-link>
    <div class="data-panel">
      <nuxt-link class="name" :to="'/user/' + userCardData.id" :title="userCardData.name">
        {{ userCardData.name }}
      </nuxt-link>
      <p class="signature" :title="userCardData.signature">
        {{ userCardData.signature }}
      </p>
      <p v-if="userData && userData.userId !== userCardData.id" class="btn-panel">
        <!--isFans 的意思是，他是否你的粉丝-->
        <!--isFollow 的意思是，你是否关注了他-->
        <!--isMutual 的意思是，你俩互相关注-->
        <el-tooltip v-if="userCardData.isMutual" class="item" effect="light" content="点击取消关注" placement="right">
          <button @click="toFollow('delete')">
            互相关注
          </button>
        </el-tooltip>
        <!--你关注的人，但不是你的粉丝-->
        <button v-if="userData && !userCardData.isFans && userCardData.isFollow" @click="toFollow('delete')">
          已关注
        </button>
        <!--你的粉丝，但你没关注他-->
        <button v-if="userData && userCardData.isFans && !userCardData.isFollow" @click="toFollow('post')">
          关注
        </button>
        <!--不是你的粉丝，你也没关注他-->
        <button v-if="userData && !userCardData.isFans && !userCardData.isFollow" @click="toFollow('post')">
          关注
        </button>
      </p>
      <p v-if="!userData" class="btn-panel">
        <!--<button v-if="!userData || !userCardData.isFans && !userCardData.isFollow" @click="toFollow('post')">-->
        <!--关注-->
        <!--</button>-->
        <button @click="toFollow('post')">
          关注
        </button>
      </p>
    </div>
  </section>
</template>

<script>
import { checkUserData } from '~/assets/js/util'

export default {
  name: 'UserCard',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userCardData: {}
    }
  },
  computed: {
    userData() {
      return this.$store.state.user.userData
    }
  },
  mounted() {
    this.userCardData = this.data
  },
  methods: {
    async toFollow(method) {
      const res = checkUserData(this)
      if (!res) return
      const params = {
        targetUserId: this.userCardData.id
      }
      const data = await this.$request({
        context: this,
        method,
        url: 'userFans/fans',
        params
      })
      if (!data) return
      this.$message.success('操作成功！')
      this.userCardData.isFollow = !this.userCardData.isFollow
    }
  }
}
</script>

<style scoped lang="scss">
@import "~assets/css/public";
.user-card {
  height: 94px;
  width: 47%;
  margin: 2% 0 0 2%;
  box-sizing: border-box;
  display: flex;
  overflow: hidden;
  padding: 12px;
  border: solid 1px #eaeaea;

  .data-panel {
    width: 240px;
    flex: 1;
    font-size: 12px;
    color: #999;
    margin-left: 14px;

    p {
      margin: 6px 0;
    }
    .name {
      font-size: 14px;
      color: #222;
      line-height: 18px;
      @include one-line-text;
    }
    .signature {
      height: 14px;
      line-height: 14px;
      @include one-line-text;
    }

    .btn-panel {
      button {
        background: none;
        cursor: pointer;
        color: $theme-color;
      }
    }
  }
  a.avatar {
    flex-shrink: 0;
    display: block;
    width: 68px;
    height: 68px;
    overflow: hidden;
    img {
      @include inner-img;
    }
  }
}
</style>
